<script>
export default {
  name: 'contractTable',
  props: {
    contractList: {
      type: Array,
      required: true,
    },
    enterpriseId: {
      type: Number,
      required: true,
    },
  },
  methods: {
    formatterTime(row) {
      return `${row.startTime}至${row.endTime}`;
    },
    formatterStatus(row) {
      const MAP = { 0: '待生效', 1: '生效中', 2: '已到期', 3: '已退租' };
      return MAP[row.status] || '未知';
    },
    formatTagType(row) {
      const MAP = { 0: 'warning', 1: 'success', 2: 'info', 3: 'danger' };
      return MAP[row.status];
    },
    async handleRentingQut(row) {
      const confirm = await this.$confirm('确定要退租吗', '提示').catch(error => error);
      if (confirm === 'cancel') return;
      try {
        const result = await this.$store.dispatch('enterpriseStore/rentingQut', row.id);
        await this.$store.dispatch('enterpriseStore/fetchContractList', this.enterpriseId);
        this.$message.success(result);
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    async handleDelete(row) {
      try {
        const result = await this.$store.dispatch('enterpriseStore/deleteContract', row.id);
        await this.$store.dispatch('enterpriseStore/fetchContractList', this.enterpriseId);
        this.$message.success(result);
      } catch (error) {
        this.$message.error(error.message);

      }
    },
    handleRenew(row) {
      console.log(row);
    },

  },
};
</script>

<template>
  <el-table size="small" border stripe :header-cell-style="{background:'#c00000',color:'#fff'}" :data="contractList">
    <el-table-column label="租赁楼宇" prop="buildingName" align="center"></el-table-column>
    <el-table-column label="租赁起止时间" align="center" :formatter="formatterTime"></el-table-column>
    <el-table-column label="合同状态" align="center">
      <template #default="{row}">
        <el-tag effect="dark" :type="formatTagType(row)">{{ formatterStatus(row) }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="{row}">
        <el-button type="text" :disabled="row.status===3" @click="handleRenew(row)">续租</el-button>
        <el-button type="text" :disabled="row.status===3||row.status===2" @click="handleRentingQut(row)">退租</el-button>
        <el-button type="text" :disabled="row.status===1" @click="handleDelete(row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped lang="scss">

</style>
